<template>
  <div class="outer_content_box">
    <div class="content_box">
      <el-row class="buttonsGroup">
        <el-button color="#626aef">添加</el-button>
        <el-button color="#626aef">编辑</el-button>
        <el-button color="#626aef">删除</el-button>
      </el-row>
      <el-row>
        <tableSearch :filedTypeList="filedTypeList"></tableSearch>
      </el-row>
      <div class="listGroup">
        <tableList
          :total="total"
          :pagesize="pagesize"
          :tableData="tableListData"
          :tableField="tableField"
          isSelectMult="true"
        ></tableList>
      </div>
    </div>
  </div>
  <el-dialog v-model="dialogFormVisible" title="编辑" width="500">
    <el-form :model="form">
      <el-form-item label="是否成交" :label-width="formLabelWidth">
        <el-select v-model="form.is_deal">
          <el-option label="成交" value="shanghai" />
          <el-option label="定金" value="beijing" />
          <el-option label="未成交" value="beijing" />
        </el-select>
      </el-form-item>
      <el-form-item label="定金" :label-width="formLabelWidth">
        <el-input v-model="form.earnest" autocomplete="off" />
      </el-form-item>
      <el-form-item label="成交金额" :label-width="formLabelWidth">
        <el-input v-model="form.trading_volume" autocomplete="off" />
      </el-form-item>
      <el-form-item
        class="date"
        label="实际到院日期"
        :label-width="formLabelWidth"
      >
        <el-date-picker
          v-model="form.to_date"
          type="date"
          placeholder="选择日期"
        />
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="dialogFormVisible = false">
          确认
        </el-button>
      </span>
    </template>
  </el-dialog>
  <!-- 更改弹窗状态 start -->
  <el-dialog v-model="dialogVisible" title="修改状态" width="30%">
    <span>是否修改客户到院状态？</span>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="dialogVisible = false">
          确认
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>
<script lang="ts" setup>
import { ref, reactive, toRefs, onBeforeMount } from "vue";
import { useRouter } from "vue-router";
import { getUsersInfoList } from "../../../request/api";
import { useStore } from "vuex";
import tableList from "../../../common/pages/table.vue";
import tableSearch from "../../../common/pages/tableSearch.vue";
const total = ref(0);
const pagesize = ref(0);
const tableField = ref([]);
const tableListData = ref([]);
const dialogFormVisible = ref(false);
const dialogVisible = ref(false);
const formLabelWidth = "140px";
const form = reactive({
  is_deal: "",
  trading_volume: "", //成交金额
  earnest: "", //定金
  to_date: "", //到院日期
});
const filedTypeList = ref([
  {
    field: "name",
    label: "姓名",
    type: "text",
  },
  {
    field: "date",
    label: "日期",
    type: "date",
  },
  {
    field: "select",
    label: "选择框",
    type: "select",
    option: [
      {
        label: "Zone one",
        value: "shanghai", //选择的真正值
      },
      {
        label: "Zone two",
        value: "beijing",
      },
    ],
  },
  {
    field: "checkbox",
    label: "多选",
    type: "checkbox",
    checkbox: [
      {
        label: "one",
        value: "1",
      },
      {
        label: "two",
        value: "2",
      },
      {
        label: "three",
        value: "3",
      },
      {
        label: "four",
        value: "4",
      },
    ],
  },
  {
    field: "radio",
    label: "单选",
    type: "radio",
    radio: [
      {
        label: "Sponsor",
      },
      {
        label: "sad",
      },
    ],
  },
]);
onBeforeMount(() => {
  getUsersInfoList().then((res) => {
    console.log(res);
    if (res.code == 200) {
      // total.value = res.data.total;
      pagesize.value = res.data.total_page;
      tableListData.value = res.data.list.concat(
        JSON.parse(JSON.stringify(res.data.list))
      );
      total.value = tableListData.value.length;
      for (let key in res.data.column_name) {
        let obj = { label: "", field: "" };
        console.log(key);
        obj.field = key;
        obj.label = res.data.column_name[key];
        tableField.value.push(obj);
      }
      const oper = {
        label: "操作",
        field: "opera",
        opera: [
          {
            type: "success",
            text: "编辑",
            calc: (row, column, $index) => {
              console.log(row, column, $index);
              form.is_deal = "";
              form.trading_volume = "";
              form.earnest = "";
              form.to_date = "";
              dialogFormVisible.value = true;
            },
          },
          {
            type: "danger",
            text: "删除",
            calc: (row, column, $index) => {
              console.log(row, column, $index);
              dialogVisible.value = true;
            },
          },
        ],
      };
      tableField.value.push(oper);
    }
  });
});
</script>
<style lang="less" scoped>
@import url("../../../style/reset.less");
.buttonsGroup {
  width: 100%;
  padding: 10px;
}
.listGroup {
  padding: 10px;
}
button {
  color: #000;
}
/deep/ .el-select {
  width: 100%;
}
/deep/ .el-input__wrapper {
  width: 100%;
}
.date {
  /deep/ .el-input {
    flex-grow: 1;
  }
  /deep/ .el-input__wrapper {
    box-sizing: border-box;
    width: 100%;
  }
}
</style>
